Fix table re-rendering by showing/hiding actions column via CSS instead #665
Conversation
src/components/table/_table.scss
Outdated
| @@ -144,3 +144,14 @@ | |||
| overflow: visible; /* 1 */ | |||
| } | |||
| } | |||
|
|
|||
| .euiTableCellContent--showOnHover { | |||
| > * { | |||
There was a problem hiding this comment.
Makes way more sense to handle the hover opacities via css. But, universal selectors are not great in practice and we're trying to stay away from them in EUI as it can have unintended behaviors if the DOM is not exactly as the CSS is expecting.
To remedy this, I think you need to pass the showOnHover prop down to the child element of the EuiTableRowCell and apply the opacities directly to this. This will ensure you're targeting the correct element to show/hide.
|
@cchaos Thanks for the feedback - updated PR to replace the wildcard selector with |
src/components/table/_table.scss
Outdated
| @@ -146,7 +146,7 @@ | |||
| } | |||
|
|
|||
| .euiTableCellContent--showOnHover { | |||
| > * { | |||
| .euiTableCellContent__hoverItem { | |||
| opacity: 0; | |||
|
|
|||
| .euiTableRow:hover > .euiTableRowCell > &, | |||
There was a problem hiding this comment.
The specificity of this selector is too high. Remove the > .euiTableRowCell > and it should still work with just .euiTableRow:hover &
Fixes #441
This PR fixes unnecessary re-rendering of the entire
EuiBasicTablecomponent upon hovering over table rows by:hoverRowstate onEuiBasicTable.euiTableCellContent--showOnHovertoEuiTableRowCellwhen propshowOnHoveris trueThe
.euiTableCellContent--showOnHoverclass has styling rules to hide its content by default and show it when its parent.euiTableRowis hovered.Normal/keyboard navigation for single and multiple action column remains the same (no functionality changes).